<template>
	<view class="">
		<headerinfo></headerinfo>
		<view class="width60">
			<view class="page friend_Page">
				<view class="guding" id="domId">
					<!-- <image src="/static/images/whiteBack.png" mode="widthFix" class="bvackiunmg" @click="backimg"></image> -->
					<view class="bg_top"
						:style="{ backgroundImage: `url(${userData.background?userData.background:'https://www.25175.net/images/mybg.jpg'})` }">
						<!-- <view class="ics">
								<view class="icons" @click="toPage('/pagesfriend/tabbar/editmy')">
									<i class="iconfont">&#xe612;</i>
				
								</view>
							</view> -->

						<view class="cardbox">
							<view class="touxiang">
								<image class="tx" :src="userData.avatar" mode="aspectFill"></image>
							</view>
							<view class="userText">
								<view class="name" @click="toPage('/pagesfriend/changeMy/editmyrealname')">
									{{userData.nickname}} <i class="iconfont">&#xe627;</i>
								</view>
								<view class="numlist">
									<span class="list" @click="toPage('/pagesfriend/tabbar/guanzhu?queryFan=1')">
										<span>{{tongji.followeeCount}}</span>
										<span>关注</span>
									</span>
									<span class="list" @click="toPage('/pagesfriend/tabbar/guanzhu?queryFan=2')">
										<span>{{tongji.followerCount}}</span>
										<span>被关注</span>
									</span>
									<span class="list" @click="toPage('/pagesfriend/tabbar/his')">
										<span>{{tongji.momentCount}}</span>
										<span>我看过</span>
									</span>
								</view>

								<view class="numlist" v-if="userData.province && userData.city">
									<span class="list">
										<span style="font-size: 30rpx;">
											<span style="font-size: 30rpx;">{{userData.province}} </span>
											<span style="font-size: 30rpx;"
												v-if="userData.province!=userData.city && userData.city"> >
												{{userData.city}} </span> </span>
									</span>
								</view>
							</view>

							<view class="tag">
								<span @click="toPage('/pagesfriend/tabbar/taglist')"> 标签 <i
										class="iconfont">&#xe613;</i>
								</span>
								<span
									style="max-width: 180rpx;overflow: hidden; text-overflow: ellipsis; white-space: nowrap; "
									v-for="(item,index) in userData.tags" :key="index">{{item}} </span>
							</view>
						</view>
					</view>

					<!-- 选项 -->
					<view class="icon_list">
						<u-grid :border="false" col="4" @click="click">
							<u-grid-item v-for="(baseListItem, baseListIndex) in baseList" :key="baseListIndex">
								<view
									style="display: flex;align-items: center;justify-content: center;flex-direction: column;"
									:class="baseListIndex == 4?'shenghuo':''">
									<u-icon color="#158dd4" :customStyle="{ paddingTop: 20 + 'rpx' }"
										:name="baseListItem.name" :size="22"></u-icon>
									<u-badge v-if="baseListItem.title == '我的消息' && weidunum>0"
										:value="weidunum"></u-badge>
									<text class="grid-text">{{ baseListItem.title }}</text>
								</view>
							</u-grid-item>
							<!-- 	<u-grid-item class="shenghuo" >
						  			<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" name="bookmark" :size="22"></u-icon>
						  			<text class="grid-text">我的生活</text>
						  		</u-grid-item> -->
						</u-grid>
					</view>
				</view>

				<!-- <view class="" :style="{ height: `${boxheight}px`}"></view> -->


				<!-- 滑动列表 -->
				<view class="o-content">
					<view class="tab-content">
						<articlelist ref="articlelist" @share="share" :isFixed="isFixed" :isMy="true"></articlelist>
					</view>

					<view class="nomore">
						没有更多了 ~
					</view>
				</view>


				<uni-popup ref="popup" type="bottom">
					<share @closeDia="closeDia"></share>
				</uni-popup>
			</view>
		</view>
	</view>

</template>

<script>
	import share from '@/components/share/share.vue'
	import articlelist from './components/articlelist.vue'
	export default {
		components: {
			articlelist,
			share
		},
		data() {
			return {
				weidunum: 0,
				isFixed: false,
				userData: {},
				tongji: {},
				boxheight: 0,
				baseList: [{
						name: 'attach',
						title: '创作中心',
						path: ''
					}, {
						name: 'coupon',
						title: '关注列表',
						path: '/pagesfriend/tabbar/guanzhu?queryFan=1'
					},
					{
						name: 'star',
						title: '我的粉丝',
						path: '/pagesfriend/tabbar/guanzhu?queryFan=2'
					},
					{
						name: 'camera',
						title: '我的足迹',
						path: '/pagesfriend/tabbar/his'
					},
					{
						name: 'star',
						title: '我的收藏',
						path: '/pagesfriend/tabbar/shoucang'
					},
					{
						name: 'bag',
						title: '我的草稿',
						path: '/pagesfriend/tabbar/caogao'
					},
					{
						name: 'chat',
						title: '我的消息',
						path: '/pagesfriend/tabbar/message'
					},
					{
						name: 'setting',
						title: '我的设置',
						path: '/pagesfriend/tabbar/editmy'
					}
				]
			};
		},

		onShow() {
			let squareTagRefresh = uni.getStorageSync('squareTagRefresh')
			if (squareTagRefresh) {
				this.getData()
				uni.setStorageSync('squareTagRefresh','')
			}
		},
		mounted() {
			this.$nextTick(() => {
				this.$refs.articlelist.getAllCategories()
				this.getData()
				this.gettongji()
				this.messagenum()
				uni.pageScrollTo({
					scrollTop: 0, //滚动到页面的目标位置
					duration: 300
				})
			})

		},
		methods: {

			backimg() {
				uni.navigateBack()
			},
			click(name) {

				let url = this.baseList[name].path

				let title = this.baseList[name].title

				if (title == '创作中心') {
					let username = uni.getStorageSync('username') ? uni.getStorageSync('username') : ''
					uni.navigateTo({
						url: `/pagesfriend/tabbar/other?username=${username}`
					})

				} else if (title == '家庭日历') {
					if (this.userNewCalendar) {
						uni.navigateTo({
							url: '/pages/calendar/index2'
						})
					} else {
						uni.navigateTo({
							url: '/pages/calendar/index'
						})
					}

				} else if (title == 'AI管家') {
					uni.switchTab({
						url: '/pages/chat/index'
					})
				} else if (title == '朋友圈') {
					this.$api2.createUser(this.userData).then(res => {
						uni.navigateTo({
							url: '/pagesfriend/tabbar/index'
						})
					})
				} else {
					uni.navigateTo({
						url
					})
				}

			},
			gettongji() {
				this.$api2.queryMyStatistics().then(res => {
					console.log('统计')
					console.log(res)
					this.tongji = res
				})
			},
			getData() {
				this.$api2.getUserInfo().then(res => {
					console.log('用户信息')
					console.log(res)
					this.userData = res
				})
			},
			messagenum() {

				this.$nextTick(() => {

					const query = uni.createSelectorQuery().in(this);
					query.select('#domId').boundingClientRect((dome) => {
						console.log('123123')
						console.log(dome)
						this.boxheight = dome.height
					}).exec();
				})



				this.$api2.getUnReadMessageCount().then(res => {
					console.log('未读消息个数')
					console.log(res)
					this.weidunum = res
				})
			},
			// 分享到朋友圈
			onShareTimeline() {
				let data = {
					title: '来自好友的分享', // 默认是小程序的名称
					path: `/pagesfriend/tabbar/index`, // 默认是当前页面，必须是以‘/’开头的完整路径
					imageUrl: '', // 图片封面，本地文件路径、网络图片路，支持PNG及JPG，默认当前页面截图，显示图片长宽比是 5:4。
					success: res => {
						// 分享成功
						if (res.errMsg == 'shareAppMessage:ok') {}
					},
					fail: res => {
						// 用户取消
						if (res.errMsg == 'shareAppMessage:fail cancel') {}
						// 分享失败
						if (res.errMsg == 'shareAppMessage:fail') {}
					},
					complete: res => {}
				}
				return data
			},
			// 分享给好友
			onShareAppMessage(options) {

				// 设置菜单中的转发按钮触发转发事件时的转发内容
				var shareObj = {
					title: '来自好友的分享', // 默认是小程序的名称(可以写slogan等)
					desc: '', // 小程序的描述
					path: `/pagesfriend/tabbar/index`, // 默认是当前页面，必须是以‘/’开头的完整路径
					imageUrl: '', // 图片封面，本地文件路径、网络图片路，支持PNG及JPG，默认当前页面截图，显示图片长宽比是 5:4。
					success: function(res) {
						// 转发成功之后的回调

						if (res.errMsg == 'shareAppMessage:ok') {
							console.log(res)

						}
					},

				}

				// 返回shareObj
				return shareObj;
			},
			share() {
				this.$refs.popup.open('bottom')
			},
			closeDia() {
				this.$refs.popup.close()
			},
			toPage(url) {
				// if (url = '/pagesfriend/tabbar/taglist' && userData.tags) {
				// 	var tags = this.userData.tags.join(',').trim()
				// 	tags = encodeURIComponent(tags)
				// 	url=  url +'?tags='+tags
				// }
				uni.navigateTo({
					url
				})
			}
		}
	};
</script>

<style>
	page {
		background-color: #f2f2f2;
	}
</style>
<style lang="scss" scoped>
	.bvackiunmg {
		position: fixed;
		top: 60rpx;
		left: 40rpx;
		z-index: 100;
		width: 60rpx;
		z-index: 1000;
	}

	.guding {}

	.icon_list {
		padding-top: 10rpx;
		background-color: #fff;
		padding-bottom: 10rpx;
	}


	.bg_top {
		height: 540rpx;
		width: 100%;
		background-size: 100%;
		position: relative;
		padding: 40rpx;
		padding-top: 170rpx;

		.ics {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.icons {
				display: flex;
				align-items: center;

				.iconfont {
					color: #fff;
					margin-left: 30rpx;
				}
			}

			.iconfont {
				color: #fff;
				font-size: 44rpx;
			}

		}

		.cardbox {
			width: 90%;
			margin: 0 auto;
			display: block;
			position: absolute;
			left: 50%;
			bottom: 30rpx;
			transform: translateX(-50%);
			background-color: #ffffff8f;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 30rpx;

			.touxiang {
				.tx {
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
					position: absolute;
					left: 40rpx;
					top: -40rpx;
				}

			}

			.userText {
				margin-left: 180rpx;
			}

			.name {
				font-size: 40rpx;
				display: flex;
				align-items: center;

				.iconfont {
					margin-left: 20rpx;
					font-size: 30rpx;
					color: #6b6b6b;
					font-weight: bold;
				}
			}

			.numlist {
				display: flex;

				.list {
					display: flex;
					align-items: center;
					margin-right: 20rpx;

					span:first-child {
						font-size: 50rpx;
						margin-right: 10rpx;
					}
				}
			}
		}

		.tag {
			margin-top: 30rpx;
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			span {
				padding: 10rpx 20rpx;
				background-color: #fff;
				border-radius: 40rpx;
				margin-right: 20rpx;
				white-space: nowrap;
				display: inline-block;
				margin-bottom: 10rpx;

				.iconfont {
					font-size: 30rpx;
					display: inline-block;
				}
			}
		}
	}


	::v-deep .u-badge {
		position: absolute;
		right: 15px;
		top: 0;
	}
</style>